<template>
  <div>
    <van-nav-bar
      title="景点"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-image
          round
          width="1rem"
          height="1rem"
          fit="contain"
          :src="this.userInfo.photo"
        />
      </template>
    </van-nav-bar>
    <van-tabs color="rgb(49, 193, 230)" type="line">
      <van-tab
        v-for="(value, index) of tabList"
        :key="index"
        :title="value.title"
      >
        <img
          v-for="(value, index) of value.imgSrc"
          :key="index"
          :src="value"
          alt=""
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      tabList: [
        {
          title: "城市风光",
          imgSrc: [
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E9%9D%92%E5%B2%9B.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E7%8F%A0%E6%B5%B7.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%8C%97%E4%BA%AC.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E8%8B%8F%E5%B7%9E.jpg",
          ],
        },
        {
          title: "山水田园",
          imgSrc: [
            "http://qzek6s6bf.hn-bkt.clouddn.com/fenghuang.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/2.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/3.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/4.jpg",
          ],
        },
        {
          title: "名胜古迹",
          imgSrc: [
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%90%8D%E8%83%9C%E5%8F%A4%E8%BF%B9_%E9%95%BF%E5%9F%8E.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%90%8D%E8%83%9C%E5%8F%A4%E8%BF%B9_%E6%95%85%E5%AE%AB.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%90%8D%E8%83%9C%E5%8F%A4%E8%BF%B9_%E9%BB%84%E5%B1%B1.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%90%8D%E8%83%9C%E5%8F%A4%E8%BF%B9_%E8%8B%8F%E5%B7%9E%E5%9B%AD%E6%9E%97.jpg",
          ],
        },
        {
          title: "国外景点",
          imgSrc: [
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E6%84%8F%E5%A4%A7%E5%88%A9%E7%BD%97%E9%A9%AC%E6%96%97%E5%85%BD%E5%9C%BA.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E9%9B%85%E5%85%B8%E5%8D%AB%E5%9F%8E_%E5%B8%8C%E8%85%8A.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%9F%83%E5%8F%8A%E9%87%91%E5%AD%97%E5%A1%94.jpg",
            "http://qzek6s6bf.hn-bkt.clouddn.com/%E5%9F%83%E8%8F%B2%E5%B0%94%E9%93%81%E5%A1%94.jpg",
          ],
        },
      ],
    };
  },
  created() {
    this.loadAddressList();
  },
  computed: {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    loadAddressList() {
      axios.get("/api/hotelList").then((res) => {
        /*        console.log(res.data.data.addressList); */
        this.hotelList = res.data.data.hotelList;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  width: 96%;
  margin-left: 2%;
  margin-bottom: 4%;
  border-radius: 5%;
  border: 1px solid rgb(204, 203, 203);
}
</style>
